// 权限控制
// 应用启动的时候，权限控制就立刻生效
// main.js 初始化的事情 立刻执行一下
// 使用模块化 导入 就就会立刻执行
// 模块化 export import 直接导入js  就会立刻执行，原因是在main.js中 导入了 ，记得看看有没有导入这个文件，别忘了这一步

import router from '@/router'
import store from '@/store'
import { getToken } from './utils/auth'
// 进度条插件与样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { asyncRputes } from '@/router/asyncRputes'

// 创建白名单
const WHITELIST = ['/login', '/404']
// 路由前置守卫
router.beforeEach(async(to, from, next) => {
  // 获取之前开启进度条
  NProgress.start()
  // to:跳转到的目标路由对象
  // from:来源路由对象
  // next:放行函数 可执行的函数
  // 定义token （不要在外边定义，会形成死数据 无效操作）
  const token = getToken()
  // 是否有token
  if (token) {
    // 有token
    // 判断是否去登陆页面？
    if (to.path === '/login') {
      next('/')
    } else {
      // 触发action函数
      next()
      if (!store.state.user.userInfo.userId) {
        const res = await store.dispatch('user/fetchUserInfo')
        // 权限控制
        // 1. 拿到当前用户的menus权限数据 以及 所有的动态路由表
        const menus = res.roles.menus
        // 2. 以menus为主对asyncRoutes做过滤 [filter] 找到符合条件的项 [路由的name能否在menus中找到 找得到就是符合条件
        // console.log(menus, asyncRputes)
        const filterMenus = asyncRputes.filter((route) => menus.includes(route.children[0].name))
        console.log(filterMenus)
        // 3. 动态添加路由 把筛选出来有资格的路由添加到路由系统中
        // 让访问path的时候可以渲染组件
        // 404页 作为一个兜底路由 有一个要求得放在所有路由的最末尾
        // 如果放到了中间 会出现刷新的时候 会先匹配404页 相当于直接在中间就匹配上了
        // [静态 + 动态 + 404] [静态 + 404 + 动态]
        router.addRoutes([...filterMenus, { path: '*', redirect: '/404', hidden: true }])
        // 4. 调用store的方法把过滤之后的动态路由表加入
        store.commit('menu/setMenuList', filterMenus)
      }
    }
  } else {
    // 没token
    // 看是否在白名单中：当前的路由不需要加控制 直接放行
    // 如何判断字符串是否在数组中找的到？
    if (WHITELIST.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  // 获取结束后 关闭进度条
  NProgress.done()
}
)
